import React,{PureComponent} from 'react'
class App extends PureComponent{
  constructor(props){
    super(props)
    this.state={
      text1:'🐍',
      text2:'🦅',
      choose:true
    }
  }
  render(){
    return(
      <div>
        {/* 不可以修改 */}
        <input type="text" value={this.state.text1} readOnly></input>
        {/* 可以修改 */}
        <input type="text" defaultValue={this.state.text2}></input>
        {/* 可以修改 */}
        <input type="checkbox" defaultChecked={this.state.choose}
        ></input>
        {/* 不可以修改 */}
        <input type="checkbox" checked={this.state.choose} readOnly></input>
        {/* 
        在受控组件上指定 value 的 prop 会阻止用户更改输入。
        如果指定了 value，但输入仍可编辑，则可能是意外地将value 设置为 undefined 或 null。
        设置为null会报错
        设置为 undefined 不会报错 
        */}
        <input type="text" value={undefined}></input>
      </div>
    )
  }
}
export default App